<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #res_info{
            width: 60%;
            min-height: 300px;
            background: azure;
            border: 1px solid #000;
            font-size: 30px;
            color: #000000;
        }
        #my{
            background: beige;
            padding: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="my">
        <h1>请选择一个图片进行识别</h1>
        <h2>author:刘皓</h2>
        <h2>link me : 17691107518 微信同步</h2>
    </div>
    <hr>

    <form id="fileUploadForm" action="/baidu_api/recognize" enctype="multipart/form-data" method="post">
      <input type="file" id="file" name="file">
      <input type="button" value="上传图片识别文字" id="uploadBtn" @click="uploadBtn"/>
    </form>
    <h2 v-if="show_status">识别图片的结果如下:</h2>
    <hr v-if="show_status">
       <div id="res_info" v-if="show_status">

           <p v-html="rec_result">
           </p>
        </div>
</div>

<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/jquery.js}"></script>

<script type="text/javascript">
   const {createApp} = Vue
    createApp({
        data(){
            return {
                rec_result : '',
                show_status : false
            }
        },
        methods:{
            uploadBtn(){
                let that = this
                var url = "https://www.xiaobangcai.com:8443/liuhouse_gj/baidu_api/recognize";
                that.rec_result = ""
                let formData = new FormData($('#fileUploadForm')[0]);
                $.ajax({
                    url: url, // 替换为你的服务器端点
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        let res = JSON.parse(response)
                        let list = res.words_result

                        $.each(list , function (index , obj){
                            // console.log('对象'+(index+1) + ':' + obj.words)
                            let index_temp = (index + 1)
                            let words = obj.words
                            let res_msg_temp = index_temp+':'+words
                            console.log(res_msg_temp)
                            that.rec_result += res_msg_temp + "<br/>"
                        })
                        if(that.rec_result.length > 0){
                            that.show_status = true
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('File upload failed:', status, error);
                    }
                });
            }
        }
    }).mount("#app")


</script>

</body>
</html>